<template>
    <el-row class="rowBox" :gutter="8">
      <el-col :span="5">
        <AppTitleBox class="aaa" title="企业类型">
          <div class="item-list">
            <el-tree
              :data="companyType"
              node-key="value"
              default-expand-all
              @node-click="selectCompanyType"
            >
              <template #default="{ data }">{{ data.label }}</template>
            </el-tree>
          </div>
        </AppTitleBox>
      </el-col>
      <el-col :span="19">
        <AppTitleBox class="aaa" title="授权">
          <div class="btns">
            <el-button @click="savePermission" type="primary">保存</el-button>
          </div>
          <div class="tableBox" ref="tableBox">
            <div style="height: 200px;">
              <AppMenuPermissionTree
                :data="menu"
                v-for="menu in tree"
                :key="menu.Id"
              ></AppMenuPermissionTree>
            </div>
          </div>
          
        </AppTitleBox>
      </el-col>
    </el-row>
</template>

<script >
import { defineComponent } from "vue";
import AppTitleBox from "@/components/AppTitleBox.vue";
import AppMenuPermissionTree from "@/components/AppMenuPermissionTree.vue";

export default defineComponent({
  components: {
    AppTitleBox,
    AppMenuPermissionTree,
  },
  data() {
    return {
      selected: "Platform",
      CompanyType: {
        Platform: { name: "平台", code: "Platform", idx: 0 },
        Customer: { name: "客户", code: "Customer", idx: 0 },
        Provider: { name: "供应商", code: "Provider", idx: 0 },
      },
      // 授权菜单树
      tree: [],
      companyType: [
        {
          label: "平台",
          value: "Platform",
        },
        {
          label: "客户",
          value: "Customer",
        },
        {
          label: "供应商",
          value: "Provider",
        },
      ],
      PermissionHeight: 0
    };
  },
  methods: {
    selectCompanyType(select) {
      this.selected = select.value;
      this.loadPermissions();
    },
    async loadPermissions() {
      let res = await this.$http.get(
        "/api/MenuPermission/GetPermissionMenuTree",
        {
          companyType: this.selected,
        }
      );
      this.tree = res;
    },
    async savePermission() {
      const loading = this.$loading({
        lock: true,
        text: "保存中",
      });

      let res = await this.$http.post("/api/MenuPermission/Permit", {
        companyType: this.selected,
        trees: this.tree,
      });

      if (!res.Status) {
        this.$message.error(res.Message ?? "保存失败");
        return;
      }

      this.$message.success(res.Message ?? "保存成功");
      await this.loadPermissions();

      loading.close();
    },
  },
  async mounted() {
    this.PermissionHeight = window.getComputedStyle(this.$refs.tableBox).height;

    await this.loadPermissions();
    
  },
});
</script>

<style lang='scss' scoped>
.item-list {
  text-align: center;
}
.item {
  margin: 10px 0px;
  cursor: pointer;
  font-weight: 700;
  &.active {
    color: #409eff;
  }
}
.btns {
  padding: 10px;
}
.rowBox {
  height: 100%;
  box-sizing: border-box;
  .el-col {
    height: 100%;
    box-sizing: border-box;
  }
}
.aaa {
  height: 100%;
  box-sizing: border-box;
  :deep(.content){
    height: calc(100% - 40px);
  }
}
.treeBox{
  height: 100%;
}
.fullHeight{
  height: 100%;
}
.tableBox{
  height: calc(100% - 52px);
}
</style>